<!-- 商品详情界面 -->
<template>
	<!-- 导航栏 当滑动到一定高度才显示出来-->
	<view class="tab-position" :style="{opacity:tabOpacity}" v-show="isShow">
		<!-- 撑开顶部高度 -->
		<view :style=" 'height:' + btn_top + 'px;' "></view>
		<!-- 顶部选项 -->
		<view class="tab-layout" :style="['height:' + btn_height + 'px;','padding-right:' + btn_width + 'px;']">
			<!-- 返回箭头 -->
			<view class="return-arrow" @click="goBack">
				<image src="/static/images/video-return.svg" mode="widthFix"></image>
			</view>
			<!-- 选项 -->
			<view class="tab-view" v-for="(item,index) in tabName" :key="index" @click="select(index)" :style="'height:' + btn_height + 'px;'">
				<text>{{item}}</text>
				<text :class="{active : index == scrollIndex}"></text>
			</view>
		</view>
	</view>

	<!-- 轮播 商品价格 标题部分 -->
	<Swiper class="swiper select" :goods="goods" :seckill="seckill"> </Swiper>

	<!-- 评价 -->
	<Evaluate class="evaluate select" :evalNum="evalNum" :evalData="evalData"></Evaluate>

	<!-- 详情 -->
	<Img class="img select" :goods_details="goods.goods_details"></Img>

	<!-- 底部操作 -->
	<BottomBtn :goods_id="goods_id" :collectionNum="collectionNum" :skuData="skuData" :goods="goods"></BottomBtn>

	<!-- 登陆弹窗 -->
	<Login></Login>

	<!-- sku选择弹窗 -->
	<Specs :skuData="skuData" :goods="goods"></Specs>

</template>

<script setup>
	import { reactive, toRefs, onMounted, ref, nextTick, watch, onBeforeUnmount } from 'vue'
	import { onLoad, onShareAppMessage, onPageScroll } from '@dcloudio/uni-app'
	import Swiper from '@/pages/goods-detail/child/swiper.vue'
	import Evaluate from '@/pages/goods-detail/child/evaluate.vue'
	import Img from '@/pages/goods-detail/child/image.vue'
	import BottomBtn from '@/pages/goods-detail/child/bottomBtn.vue'
	import Login from '@/components/login-view.vue'
	import { login_box, comment_box,Order } from '@/public/package-js/passValue.js'
	import Specs from '@/components/specs-view.vue'

	const data = reactive({
		tabName: ['商品', '评价', '详情'], // 顶部标签名字
		btn_height: 0, // 胶囊的高度
		btn_top: 0, //按钮距离顶部的高度
		btn_width: 0, // 按钮的宽度
		custom_height: 0, //自定义导航栏的高度

		goods_id: '', // 商品id
		goods: [], // 商品列表
		collectionNum: 0, // 根据商品id查询的收藏的数量（未登录0,已登录就是总共收藏次数）
		shoppingCartNum: 0, // 购物车条数 （未登录0,已登录就是总共收藏次数）
		skuData: [], // 规格数 据
		seckill: [], // 商品的秒杀数据
		login_collection: 0, // 用来暂存登陆成功后，商品的收藏次数
		login_cart: 0, // 用来暂存登陆成功后，购物车条数
		evalNum: 0, // 评价总条数
		evalData: [], // 评价数组

		heightset: [], // 存放滚动到轮播、评价、详情组件的高度
		isShow: true, //显隐藏tab
		tabOpacity: 0, //tab透明度
		scrollIndex: 0, // 滚动对应 tab 的下标 0--商品 1--评价  2--详情
		
		timer1:'',
		timer2:''

	})
	const { tabName, btn_height, btn_top, btn_width, custom_height, isShow, tabOpacity, scrollIndex, goods_id, goods, seckill, evalNum, evalData, collectionNum, skuData } = toRefs(data)

	onMounted(() => {
		capsule()
	})

	// 1、获取胶囊按钮的位置信息
	function capsule() {
		// #ifndef APP-PLUS || H5 || MP-ALIPAY
		// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// console.log("menuButtonInfo", menuButtonInfo);
		data.btn_height = menuButtonInfo.height + 5
		data.btn_top = menuButtonInfo.top
		data.btn_width = menuButtonInfo.width
		data.custom_height = menuButtonInfo.height + menuButtonInfo.top + 5
		// #endif
	}

	// 2、请求数据，传值
	const db = wx.cloud.database()
	onLoad((event) => {
		// console.log(event)
		data.goods_id = event.goods_id

		// 获取商品数据
		const goods = db.collection('goods').doc(event.goods_id).get()

		//取出本地缓存的用户信息
		const user = uni.getStorageSync('user_info')
		
		// 获取收藏的商品数据
		const collect = db.collection('collect_goods').where({ 
			goods_id: event.goods_id,
			_openid:user.openid
		}).get()
		
		// 获取sku的数据
		const skuData = db.collection('sku_data').where({ sku_id: event.goods_id }).field({
			sku: true // 将规格返回就可以了
		}).get()

		// 获取秒杀数据
		const seckill = db.collection('seckill').where({ goods_id: event.goods_id }).field({
			original_price: true,
			seckill_price: true,
			seckill_time: true
		}).get()

		// 获取购物车条数
		const shoppingCartCount = db.collection('shopping_cart').count()

		// 评价前三条数据（页面只展示前三条评论）
		const evalData = db.collection('goods_comment').where({ goods_id: event.goods_id }).limit(3).get()

		// 评论总条数
		const evalCount = db.collection('goods_comment').where({ goods_id: event.goods_id }).count()

		// 等到所有数据获取到再操作
		Promise.all([goods, collect, skuData, seckill, shoppingCartCount, evalData, evalCount])
			.then(async res => {
				// 等到节点加载之后再进行赋值，所以用 nextTick
				await nextTick()

				// 赋值 其中收藏和购物车数量需要登录
				data.goods = res[0].data // 商品数据
				data.collectionNum = user ? res[1].data.length : 0 //收藏（如果用户已登录，就显示具体是否收藏，未登录显示为收藏）	
				data.skuData = res[2].data //sku数据
				data.seckill = res[3].data //秒杀	
				data.shoppingCartNum = user ? res[4].total : 0 //购物车件数
				data.evalData = res[5].data //前三条评论 
				data.evalNum = res[6].total //评价总条数
				
				// 登陆成功之后获取这里的购物车和收藏数
				data.login_cart = res[4].total
				data.login_collection = res[1].data.length
				

				// 取到固定不变值,赋值给下单的数据
				Order.order.goods_id = res[0].data._id
				Order.order.goods_image = res[0].data.goods_cover
				Order.order.goods_title = res[0].data.goods_title
				Order.shop_cart_num = data.shoppingCartNum		
						
				// 没有秒杀和sku，取返回价格下单
				if (data.skuData.length === 0 && data.seckill.length === 0) {
					Order.order.goods_price = res[0].data.goods_price
				}
				// 调用计算组件高度，因为数据可能会出现异步，所以调用的时候用个定时器，使计算高度延迟
				data.timer1  = setTimeout(() => {
					getHeight()
				}, 900)
			})
			.catch(err => {
				console.log(err)
			})
	})

	// 3、滚动实现对应内容的 tab显示，以及tab样式改变
	// 3-1 获取轮播，评价，详情每个组件的高度
	function getHeight() {
		const query = uni.createSelectorQuery()
		query.selectAll('.select').boundingClientRect(res => {
			// 滚动到轮播图底高度(因为顶部 tab 会遮挡住轮播最后一块，所以要减去)
			data.heightset.push(res[0].height - data.custom_height)
			// 滚动到评价的高度 
			data.heightset.push(data.heightset[0] + res[1].height)
			//滚动到详情组件的高度
			data.heightset.push(data.heightset[1] + res[2].height)
		}).exec()
	}

	// 3-1 滚动监听
	onPageScroll((e) => {
		// 顶部的时候 tab隐藏
		data.isShow = e.scrollTop === 0 ? false : true

		// 滚动时改变 tab 透明度，使其慢慢显示 
		data.tabOpacity = e.scrollTop / 300

		// 滚动到对应区域，改变 tab 样式
		let scrollTop = e.scrollTop
		
		if (scrollTop >= data.heightset[data.scrollIndex]) {
			// 往下滑
			data.scrollIndex += 1
			
		} else if (scrollTop < data.heightset[data.scrollIndex - 1]) {		
			// 往上滑
			data.scrollIndex -= 1
		}
		
	})

	// 4、点击tab跳转指定组件
	function select(index) {
		// 下标 0--商品 1--评价  2--详情
		const className = index == 0 ? '.swiper' : index == 1 ? '.evaluate' : '.img'
		const query = uni.createSelectorQuery()
		let  top = 0;
		query.select(className).boundingClientRect(res=>{
			top = res.top
		})
		
		query.selectViewport().scrollOffset(res => {
			uni.pageScrollTo({
				scrollTop: top + res.scrollTop - data.custom_height, // 节点的上边界坐标 + 节点的竖直滚动位置 - 头部高度
				duration: 300 //滚动的动画时长 
			})
			// 防止代码边距导致滚动监听赋值 index 延迟
			data.timer2 = setTimeout(() => {
				data.scrollIndex = index
			}, 400)
			
		}).exec()
	}


	// 5、监听登陆是否成功，成功则重新取收藏和购物车的数据
	watch(() => login_box.response, (newVal, oldVal) => {
		data.collectionNum = data.login_collection
		data.shoppingCartNum = data.login_cart
		// 购物车数量
		Order.shop_cart_num = data.shoppingCartNum
		
	})

	// 6、分享-转发给好友: 最好在父组件进行分享
	onShareAppMessage(() => {
		return {
			title: data.goods.goods_title,
			path: `/pages/goods-detail/goods-detail?goods_id=${data.goods_id}`,
			imageUrl: data.goods.goods_cover
		}
	})
	
	
	// 7、 返回上一页面
	function goBack() {
		uni.navigateBack({
			delta: 1
		})
	}
	
	// 8、卸载页面之前清空数据
	onBeforeUnmount(()=>{
		Order.order.specs = []//清空之前缓存的数据
		Order.order.equal_sku = ''
		clearTimeout(data.timer1)
		clearTimeout(data.timer2)
	})


</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	swiper{
		height: 980rpx !important;
	}
	
	.tab-position {
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 909;
	}

	.tab-layout {
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.return-arrow {
		width: 50rpx;
		height: 50rpx;
		margin-top: -20rpx;
	}

	.return-arrow image {
		width: 50rpx;
		height: 50rpx;
	}

	.tab-view {
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.tab-view text:nth-child(2) {
		width: 30rpx;
		height: 10rpx;
		border-radius: 10rpx;
		position: absolute;
		bottom: 0;
	}

	.active {
		background-color: #f67319;
	}
	
</style>
